<template>
  <div>
    <div style="padding: 15px;">
        <el-card shadow="never">
        <p>设备编号:  <span style="font-size: 24px; font-weight: bold;">{{ title }}</span></p>
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="时间范围">
            <el-date-picker
              v-model="dateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
              :clearable="true"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="完成人姓名">
            <el-input v-model="completedByName" placeholder="请输入完成人姓名"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSearch">查询</el-button>
            <el-button @click="handleReset">重置</el-button>
          </el-form-item>
        </el-form>
    </el-card>
    </div>
    <generic-table
      :table-data="detailsList"
      :columns="columns"
      :tableHeight="600"
      :total="total"
      :current-page="pageNum"
      :page-size="pageSize"
      :actions="actions"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
      @action="handleAction" />
  </div>
</template>

<script>
import axios from "axios";
import { getToken } from "@/utils/auth";
import GenericTable from '@/components/GenericTable/index.vue';

export default {
  components: {
    GenericTable
  },
  data() {
    return {
      title: "未选择设备",
      dateRange: [], // 时间范围
      completedByName: "",
      detailsList: [],
    //   配置表格列
      columns: [
        { prop: 'receiveTime', label: '接单时间', sortable: true},
        { prop: 'completionTime', label: '完成时间', sortable: true },
        { prop: 'completionDuration', label: '完工时长'},
        { prop: 'completedByName', label: '完成人姓名' },
        { prop: 'failurePhenomenon', label: '故障现象' },
        { prop: 'failureCategory', label: '故障类别' },
        { prop: 'failureCause', label: '故障原因' },
        { prop: 'solutionMeasures', label: '解决方案措施' }
      ],
    //   分页
      total: 0,  //数据总数
      pageNum: 1,
      pageSize: 10,
      actions: [
        { name: 'view', text: '查看', type: 'primary' },
        { name: 'edit', text: '编辑' },
        { name: 'delete', text: '删除', type: 'danger' }
      ]
    }
  },
  mounted(){
    this.fetchData();
  },
  methods: {
//  获取设备数据
    async fetchData(){
        try{
        const token = getToken();
        const params = {};

        if (this.dateRange && this.dateRange.length === 2) {
          params.startDate = this.dateRange[0];
          params.endDate = this.dateRange[1];
        }
        if(this.completedByName){
          params.completedByName = this.completedByName;
        }
        params.pageNum = this.pageNum;
        params.pageSize = this.pageSize;

        this.title = this.$route.params.number;
        const equipmentNo = this.title;
        const response = await axios.get(
          `${process.env.VUE_APP_BASE_API}/wareHouses/equipmentDetails/${equipmentNo}`,
          {
            params,
            headers: {
              Authorization: `Bearer ${token}`,
            },
          }
        );
        this.detailsList = response.data.data;
        this.total = response.data.actions;

        } catch(error){
        console.error("获取数据失败:", error);
        console.error("Error details:", {
          message: error.message,
          response: error.response,
          request: error.request,
        });
        this.$message.error(
          error.response?.data?.message || "获取数据失败，请检查网络连接"
        );
        }
    },
    handleSearch() {
      // 执行搜索逻辑
      this.fetchData();
    },
     // 重置按钮点击事件
    handleReset() {
      this.dateRange = [];
      this.completedByName = "";
      this.fetchData();
    },
    handleCurrentChange(page) {
      // 切换页码
      this.pageNum = page;
      console.log("pageNum: ",this.pageNum);
      this.fetchData();
    },
    handleSizeChange(page){
      // 切换单页数
      this.pageSize = page;
      // 重置页码为第一页
      this.pageNum = 1;
      console.log("pageSize: ",this.pageSize);
      this.fetchData();
    },
    handleAction(actionName, row) {
      // 处理操作按钮点击事件
      if (actionName === 'view') {
        // 查看详情
      } else if (actionName === 'edit') {
        // 编辑操作
      } else if (actionName === 'delete') {
        // 删除操作
      }
    }
  }
}
</script>